{% extends 'base.html' %}
{% load static %}

{% block title %}
    {{ user.username }}
{% endblock %}


{% block js %}
    <script src="https://kit.fontawesome.com/850efabe3d.js" crossorigin="anonymous"></script>  {# 图标 #}
{% endblock %}

{% block css %}
    .media-bigbody{
    height: 80px;
    background-color: #f0eef6;
    border-radius: 20px;
    }
    .h5-font{
    font-family: 华文宋体;
    font-weight: 450;
    font-size: 20px;
    color: #303034;
    }
    .div-img{
    height: 700px;
    width: 100%;
    background-image: url('{% static 'img/26.png' %}');
    border-radius: 15px;
    }
{% endblock %}


{# 站点作者名 #}
{% block usernames %}
    {{ user.username }}
{% endblock %}

{# 侧边栏分类列表 #}
{% block left_list %}
    {# include_tag 插入代码片段  #}
{% endblock %}

{# 站点名 #}
{% block site_name %}
    {{ user.blog.site_name }}
{% endblock %}


{# 主体内容左边文章 #}
{% block body-left %}
    {% for article in article_list %}
        <div class="col-md-12 article" style="margin-top: 30px">
            <div class="media">
                <h5 class="media-heading h5-font"><a
                        href="/{{ username }}/articles/{{ article.id }}.html">{{ article.title }}</a></h5>
                <div class="media-bigbody">
                    <div class="media-left">
                        <a href="#"><img class="media-object" src="/media/{{ article.blog.user.head }}"
                                         style="width: 80px;height: 80px;border-radius: 20px"></a>
                    </div>
                    <div class="media-body">
                        <p style="margin: 5px">{{ article.description }}</p>
                    </div>
                    <div style="margin-top: 10px" class="pull-right"> <!-- 作者名,点赞点踩,评论,时间-->
                        <span class="article_footer">posted @</span>
                        <span class="article_footer span1"><a
                                href="/{{ article.blog.user.username }}/">{{ article.blog.user.username }}</a></span>
                        <span class="article_footer">{{ article.update_time|date:'Y-m-d H:i:s' }}</span>
                        <span class="article_footer"><i
                                class="fa fa-thumbs-o-up fa-lg"></i>&nbsp;{{ article.up_num }}</span>
                        <span class="article_footer"><i
                                class="fa fa-thumbs-o-down fa-lg"></i>&nbsp;{{ article.down_num }}</span>
                        <span class='article_footer'><i
                                class="fa fa-commenting-o fa-lg"></i>&nbsp;{{ article.comment_num }}</span>
                    </div>
                </div>
            </div>
        </div>
    {% endfor %}
{% endblock %}

{# 主题内容右边文章 #}
{% block body-right %}
    <div class="col-md-12">
        <div class="div-img"></div>
    </div>
{% endblock %}

